<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单：采集用户信息，并提交到服务器
		     表单元素：form
		     input控件元素：采集用户信息的元素
			 必须type类型属性   属性值 text  文本框
			                        password    密文文本框
									submit      提交
									button      按钮 结合js 结合value【html4】
									reset       重置 form表单控制
									color       颜色控件
									datetime-local 本地日历控件
									date        年月日插件
									time         时间插件
									week         周插件
									range        滑块
									file         上传文件
									radio        单选框  结合name属性
									checkbox     复选框
							----	checked   默认选择【单复选框】
									image         图片按钮 结合src属性
									hidden        隐藏 结合js
									
		 -->
		<h1>登录页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text"><br><br>
		<input >
		密码：<input type="password"><br><br>
		<input type="submit">
		<input type="button" value="自定义按钮"/>
		<!-- html5写法 结合js-->
		<button>触发按钮</button>
		<input type="reset" /><br><br>
		<input type="color" />
		<input type="datetime-local" />
		<input type="date" />
		<input type="time" />
		<input type="week" />
		<input type="range" />
		<input type="file" />
		男：<input type="radio" name="sex" checked="checked"/>
		女：<input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox" checked/>佛跳墙
		<input type="checkbox" />小鸡炖蘑菇
		<input type="image" src="img/1.png"/>
		<input type="hidden" />
		<h4>表单元素：多行文本元素  cols行属性  rows列属性</h4>
		建议：<textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据</h4>
		<!--层级元素 快捷键：select>option -->
		发车时间：<select>
			<option00:00--24:00></option>
			<option00:00--06:00></option>
			<option06:00--12:></option>
			<option12:00--18:00></option>
			<option18:00--24:00></option>
		</select>
		<h4>表单元素：细节元素</h4>
		<!-- 层级元素 快捷键：details>summary+div -->
		<details>
			<summary>征婚启事</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quisquam magni praesentium dolores doloremque non quae velit odit! Dolorem ullam facilis, sequi commodi quis nisi rerum quas velit eum qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quibusdam doloremque temporibus inventore, ut fugiat aperiam alias ipsam! Amet inventore dolorem sequi dolorum earum blanditiis a nostrum quas illum molestiae? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti dignissimos tempore repudiandae assumenda et labore voluptate nesciunt. Facilis, dolores dignissimos dolor officia consectetur ullam saepe repudiandae nemo ipsa, error maxime. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem reiciendis obcaecati hic labore officiis numquam enim esse amet quo nemo provident porro praesentium ullam, fugit natus officia. Ab, rem dolor?</div>
		</details>
		</form>
		<h1>新元素：</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 必须属性 value="0~1默认值" min属性 max-->
        <meter value="80" min="0" max="100"></meter>
	</body>
</html>